import { defineComponent } from "vue";
import { addshangbiao, getshangbiaoList,
  updateGoods, getchaxun, delshangbiao } from "@/api/message";
 // 时间
import { dayjs, ElMessageBox } from 'element-plus';
// 删除
import type { Action } from 'element-plus';

export default defineComponent({
  data() {
    return {
      isDark: '',
      // 查询
     yingname: null,
      // 编辑
      bian2: false,
      // 取消
      xiao: false,
      // 弹出框
      tan: false,
      // 列表,
      list: {
        orderNumber: '',
        // 会员名称
        name: '',
        // 英文名字
        yingname: '',
        // 编码
        bian: '',
        // 创建时间
        time: '',
        // 更新时间
        turnoverTime: '',
        // 状态
        state: '1',
        // 内容备注
        neirong: '',
      },
      // 表单
      form: {
         // 状态
         orderNumber: '',
         // 会员名称
         name: '',
         // 英文名字
         yingname: '',
         // 编码
         bian: '',
         // 创建时间
         time: '',
         // 更新时间
         turnoverTime: '',
         // 状态
         state: '',
         // 内容备注
         neirong: '',
      },
        // 编辑
        bianji: {
          orderNumber: '',
          // 会员名称
          name: '',
          // 英文名字
          yingname: '',
          // 编码
          bian: '',
          // 创建时间
          time: '',
          // 更新时间
          turnoverTime: '',
          // 状态
          state: '1',
          // 内容备注
          neirong: '',
        },
      lists: [],
      limit: 10, // 几条数据
      page: 1, //页数
      total: 0, // 总页数
      // 必填
      rules: {
        name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
        // 编辑中金额
        yingname: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
        // 编辑中金额
        bian: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
          // 编辑中金额
        // bei: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
      },
    };
  },
  // 显示列表
  mounted() {
    this.getList();
    this.chaxun();
  },
  // 点击事件
  methods: {
    // 所属店铺
    shop(val: number | string) {
      val = Number(val);
      if (val === 1) return '公共商品';
      if (val === 2) return '海口解放路店';
      if (val === 3) return '海口永万路店';
      if (val === 4) return '海口长彤路店';
      if (val === 5) return '海口国库路店';
      return '鑫隆商行';
    },
    // 订单状态
    paystate(val: number | string) {
      val = Number(val);
      if (val === 1) return '待支付';
      if (val === 2) return '已支付';
      if (val === 3) return '已取消';
      if (val === 4) return '待发货';
      if (val === 5) return '已删除';
      if (val === 6) return '已退款';
      return '已发货';
    },
    //   支付状态
    orderStatus(val: number | string) {
      val = Number(val);
      if (val === 1) return '待支付';
      return '已支付';
    },
    //   配送状态
    mode(val: number | string) {
      val = Number(val);
      if (val === 1) return '自取';
      return '配送';
    },
    // 将表单的内容添加到数据库
    async handleAdd() {
      console.log('list', this.list);
      console.log('addfrom', this.$refs.addfrom);
      //等到的结果 添加到数据库
      // const res = await addshangbiao(this.list);
      // console.log(res);
      // 添加到数据库有提示
      try {
        const validateRes = await (this.$refs.addfrom as any).validate();
        const res = await addshangbiao(this.list);
        console.log('validateRes', validateRes);
        console.log('res', res);
        // 判断是否成功
        const { status } = res;
        if (status === 201) {
          this.$message.success('添加成功');
          // 成功后关闭弹窗
          this.tan = false;
          // 从新
          this.getList();
        } else {
          this.$message.warning('添加失败');
        }
      } catch (e) {
        this.$message.warning('请按要求检查表单内容');
      }
    },
    // 获取列表
    async getList() {
      // 总条数-1 乘以一页的条数
      const $skip = (this.page - 1) * this.limit;
      const res = await getshangbiaoList({
        $skip,
        $limit: this.limit,
      });
      console.log('获取列表的结果', res);
      // lists 设置的空数组名称 显示到列表中
      this.lists = res.data.data;
      this.total = res.data.total;
    },
    // 分页
    handeSizeChange(val: number) {
      console.log('val', val);
      // 获取数据
      this.limit = val;
      this.getList();
    },
    // 页数发生变化的时候
    handlePageChange(val: number) {
      // 获取页数
      this.page = val;
      this.getList();
    },
    // 修改确定按钮
    async handleEidt() {
      // 打印当前获取的内容
      console.log('bianji', this.bianji);
      // 出去id 剩下的所有属性等于当前表单内容
      const { id, ...postdata } = this.bianji;
      // 等到的是修改后的内容在赋值给数据库
      const res = await updateGoods(id, postdata);
      console.log('res', res);
      const { status } = res;
      if (status === 200) {
        this.$message.success('修改成功');
        // 修改成功后关闭弹窗
        this.bian2 = false;
        this.getList();
      } else {
        this.$message.warning('修改失败');
      }
    },
       // 修改信息
       openEdit(row: any) {
        console.log('row', row);
        // 获取信息
        this.bianji = row;
        // 弹出修改弹窗
        this.bian2 = true;
      },
      // 查询
      async chaxun() {
        console.log('2424');
        const $skip = (this.page - 1) * this.limit;
        // 根据名字查询
        const chstate = this.yingname;
        const res = await getchaxun({

          $limit: this.limit,
          $skip,
          bian: null,
          yingname: chstate,
        });
        console.log('res', res);
        //  条数等于新条数
        this.lists = res.data.data;
        // 页数等于新获取的页数
        this.total = res.data.total;
      },
       // 时间的设置
    formatTime(time: string) {
      return dayjs(time).add(20, 'hour').format('YYYY.MM.DD HH:mm:ss');
    },
    handleDel(id: number) {
      // 删除的操作一般需要二次确认 避免用户误操作
      ElMessageBox.alert('删除？确定?不后悔？', '想清楚了没', {
        confirmButtonText: 'OK',
        callback: async (action: Action) => {
          if (action === 'cancel') return false;
          const res = await delshangbiao(id);
          console.log('真正的去执行删除', res);
          if (res.status === 200) {
            this.$message.success('删除成功');
            this.getList();
          } else {
            this.$message.warning('删除失败');
          }
          return true;
        },
      });
    },
  },
});
